<template>
<section class="transfer">
    <el-container>
        <el-main class="pad-no">
            <el-table :data="tableData" :border="true" height="400" style="width: 80%">
                <el-table-column fixed label="配送区域" width="280">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type === 'data'">
                            <p>
                                {{scope.row.cities}}
                            </p>
                            <el-row class="flex-row flex-align-c flex-justify-e">
                                <el-button type="primary" icon="el-icon-edit" circle @click="editTableData(scope.$index)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle @click="deleteTableData(scope.$index)"></el-button>
                            </el-row>
                        </div>
                        <div v-else>
                            <el-button type="success" size="small" icon="el-icon-circle-plus" @click="addTableData">添加区域</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :label="`首${type=='num'?'件':'重'}(${type=='num'?'个':'kg'})`">
                    <template slot-scope="scope">
                        <section style="overflow-x: auto;overflow-y:hidden;">
                            <div v-if="scope.row.type === 'data'" class="input-slot flex-row flex-align-c flex-justify-b">
                                <el-input-number v-if="type=='num'" class="wlm-input-auto" style="width:200px;" v-model="scope.row.num" :controls="false" :min="1" ></el-input-number>
                                <el-input-number v-if="type=='weight'" class="wlm-input-auto" style="width:200px;" v-model="scope.row.num" :controls="false" :min="0.01"  @blur="changeNum(scope.row.signid,scope.row)"></el-input-number>
                            </div>
                        </section>
                    </template>
                </el-table-column>
                 <el-table-column label="运费(元)">
                    <template slot-scope="scope">
                      <section style="overflow-x: auto;overflow-y:hidden;">
                            <div v-if="scope.row.type === 'data'" class="input-slot flex-row flex-align-c flex-justify-b">
                                <el-input-number class="wlm-input-auto" style="width:200px;" v-model="scope.row.money" :controls="false" :min="0"  placeholder="请输入内容" @blur="changeNum(scope.row.signid,scope.row)"></el-input-number>
                            </div>
                        </section>
                    </template>
                </el-table-column>
                <el-table-column :label="`续${type=='num'?'件':'重'}(${type=='num'?'个':'kg'})`">
                    <template slot-scope="scope">
                      <section style="overflow-x: auto;overflow-y:hidden;">
                            <div v-if="scope.row.type === 'data'" class="input-slot flex-row flex-align-c flex-justify-b">
                              <el-input-number v-if="type=='num'"  class="wlm-input-auto" style="width:200px;" v-model="scope.row.numex" :controls="false" :min="1" ></el-input-number>
                              <el-input-number v-if="type=='weight'"  class="wlm-input-auto" style="width:200px;" v-model="scope.row.numex" :controls="false" :min="0" @blur="changeNum(scope.row.signid,scope.row)"></el-input-number>
                            </div>
                        </section>
                    </template>
                </el-table-column>
                <el-table-column label="续费(元)">
                    <template slot-scope="scope">
                      <section style="overflow-x: auto;overflow-y:hidden;">
                            <div v-if="scope.row.type === 'data'" class="input-slot flex-row flex-align-c flex-justify-b">
                              <el-input-number class="wlm-input-auto" style="width:200px;" v-model="scope.row.moneyex" :controls="false" :min="0"  placeholder="请输入内容" @blur="changeNum(scope.row.signid,scope.row)"></el-input-number>
                            </div>
                        </section>
                    </template>
                </el-table-column>
                 <el-table-column :label="`满${type=='num'?'件':'重'}(${type=='num'?'个':'kg'})(填写0则不优惠)`" min-width="150">
                    <template slot-scope="scope">
                      <section style="overflow-x: auto;overflow-y:hidden;">
                            <div v-if="scope.row.type === 'data'" class="input-slot flex-row flex-align-c flex-justify-b">
                                <el-input-number v-if="type=='num'"  class="wlm-input-auto" style="width:200px;" v-model="scope.row.coupon_num" :controls="false" :min="1" >
                                </el-input-number>
                              <el-input-number v-if="type=='weight'"  class="wlm-input-auto" style="width:200px;" v-model="scope.row.coupon_num" :controls="false" :min="0" @blur="changeNum(scope.row.signid,scope.row)">
                              </el-input-number>
                            </div>
                        </section>
                    </template>
                </el-table-column>
                    <el-table-column label="优惠(元)">
                    <template slot-scope="scope">
                      <section style="overflow-x: auto;overflow-y:hidden;">
                            <div v-if="scope.row.type === 'data'" class="input-slot flex-row flex-align-c flex-justify-b">
                              <el-input-number class="wlm-input-auto" style="width:200px;" v-model="scope.row.coupon_price" :controls="false" :min="0"  placeholder="请输入内容" @blur="changeNum(scope.row.signid,scope.row)"></el-input-number>
                            </div>
                        </section>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
    <el-dialog title="选择配送范围" :visible.sync="isShowModel" width="50%" @open="setDefultTree" @closed="clearTreeData">
        <div v-if="isShowModel" class="transfer--modelbox" v-loading="mainLoing">
            <el-container class="transfer-main">
                <el-main>
                    <section class="transfer-custom flex-row flex-align-c flex-justify-b">
                        <div class="transfer-custom-panel custom-left">
                            <p class="transfer-custom-panel__header">
                                <span>可选配送范围</span>
                            </p>
                            <div class="transfer-custom-panel__group">
                                <div class="transfer-custom-panel-item flex-row">
                                    <ul>
                                        <li class="transfer-custom-tree-item">
                                            <el-tree
                                            class="transfer-tree"
                                            accordion
                                            :left-default-checked="[]"
                                            :right-default-checked="[]"
                                            :default-checked-keys="defaultKeys"
                                            @check="treeCheckChange('Left',$event)"
                                            @checkcheck-change="treeCheckChangeAll"
                                            :data="province"
                                            render-after-expand
                                            :expand-on-click-node="false"
                                            node-key="id"
                                            ref="treeLeft"
                                            show-checkbox
                                            highlight-current
                                            :props="defaultProps"
                                            @node-click="nodeLeftClick">
                                            </el-tree>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <section class="flex-col flex-align-c flex-justify-c">
                            <div class="transfer-custom__buttons" style="margin-bottom:40px;">
                                <el-button icon="el-icon-arrow-right" circle @click="changeNode('Left')"></el-button>
                            </div>
                            <div class="transfer-custom__buttons">
                                <el-button icon="el-icon-arrow-left" circle @click="changeNode('Right')"></el-button>
                            </div>
                        </section>

                        <div class="transfer-custom-panel custom-right">
                            <p class="transfer-custom-panel__header">
                                <span>已选配送范围</span>
                            </p>
                            <div class="transfer-custom-panel__group">
                                <div class="transfer-custom-panel-item flex-row">
                                    <ul>
                                        <li class="transfer-custom-tree-item">
                                            <el-tree
                                                class="transfer-tree"
                                                accordion
                                                :left-default-checked="[]"
                                                :right-default-checked="[]"
                                                @check="treeCheckChange('Right',$event)"
                                                :data="provinceSave"
                                                render-after-expand
                                                :expand-on-click-node="false"
                                                node-key="id"
                                                ref="treeRight"
                                                show-checkbox
                                                highlight-current
                                                :props="defaultProps"
                                                @node-click="nodeRightClick">
                                            </el-tree>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </section>
                </el-main>
                <el-footer class="footer flex-row flex-align-c flex-justify-b">
                    <div class="flex-row flex-align-c flex-justify-b footer-button">
                        <el-button style="margin-left: 10px;" size="small" type="primary" @click="setTableData">确认</el-button>
                        <el-button size="small" type="primary" @click="resiteNode">清除已选配送地区</el-button>
                        <el-button size="small" type="info" plain @click="uploadTrigger">取消</el-button>
                    </div>
                </el-footer>
            </el-container>
        </div>
    </el-dialog>

</section>
</template>

<script>
import { signid, tooggleArray } from '@/utils/index'
import $axios from 'axios'
import Cookies from 'js-cookie'
import defaultConfig from './utils/config'
const store = require('store')
const allCityCode = '000000000'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      type: 'num',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      setType: 'add',
      setIndex: 0,
      isCheck: false,
      isShowModel: false,
      mainLoing: false,
      allProvinceData: [],
      defaultKeys: [],
      defaultSave: [],
      province: [],
      provinceSave: [],
      cityName: [],
      block: [],
      mapJson: defaultConfig.mapJson,
      removeNodeSave: [],
      tableData: [{
        type: 'edit'
      }]
    }
  },
  watch: {
    'config.tableData': {
      handler(newData, oldData) {
        console.log(newData, 'newData')
        if (Array.isArray(newData) && newData.length > 0) {
          this.tableData = newData
        }
      },
      immediate: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.getCityData()
    })
  },
  mounted() {},
  methods: {
    formateRegion(region) {
      console.log(region, 'region')
      if (Array.isArray(region) && region.length > 0) {
        const result = []
        region.map((item, index) => {
          const signid = item['signid']
          const savedata = store.get(signid)['savedata']
          if (savedata) {
            result.push(JSON.parse(savedata))
          }
        })
        this.tableData = [...result, ...this.tableData]
      }
    },
    resetSignData() {
      const result = []
      store.each(function(value, key) {
        if (key.includes('_DeliveryArea_')) {
          result.push(JSON.parse(value.savedata))
        }
      })
      this.tableData = [...result, ...this.tableData]
    },
    changeNum(signid, scope) {
      console.log(signid, scope, 'signid, scope')
      store.set(signid, {
        savedata: JSON.stringify(scope)
      })
      this.output()
    },
    getCityData() {
      const that = this
      const requerBase = that.mapJson.substr(1, that.mapJson.length - 1)
      const baseRequest = `${Cookies.get('BASE_API') || `${process.env.BASE_API}/`}${requerBase}`
      $axios
        .get(baseRequest)
        .then(function(response) {
          if (response.status === 200) {
            var data = response.data
            that.$rootData = data
            that.province = []
            that.cityName = []
            that.block = []
            that.allProvinceData = []
            for (var item in data) {
              if (item.match(/0000000$/)) {
                that.province.push({
                  id: item,
                  nodeLevel: 'province',
                  label: data[item],
                  value: data[item],
                  children: []
                })
              } else if (item.match(/00000$/)) {
                that.cityName.push({
                  id: item,
                  label: data[item],
                  value: data[item],
                  nodeLevel: 'city',
                  children: []
                })
              } else {
                that.block.push({
                  id: item,
                  nodeLevel: 'area',
                  label: data[item],
                  value: data[item]
                })
              }
            }
            for (var index in that.province) {
              for (var index1 in that.cityName) {
                if (that.province[index].id.slice(0, 2) === that.cityName[index1].id.slice(0, 2)
                ) {
                  that.cityName[index1].nodeParentId = that.province[index].id
                  that.province[index].children.push(that.cityName[index1])
                }
              }
            }
            for (var item1 in that.cityName) {
              for (var item2 in that.block) {
                if (
                  that.block[item2].id.slice(0, 4) === that.cityName[item1].id.slice(0, 4)
                ) {
                  that.block[item2].nodeParentId = that.cityName[item1].id
                  that.cityName[item1].children.push(that.block[item2])
                }
              }
            }
            that.province = [...[{ children: [], id: allCityCode, label: '全国', nodeLevel: 'province', value: '全国' }], ...that.province]
            that.allProvinceData = [].concat(
              JSON.parse(JSON.stringify(that.province))
            )
            console.log(that.allProvinceData)
          } else {
            console.log(response.status)
          }
        })
        .catch(function(error) {
          console.log(typeof +error)
        })
    },
    setTableData() {
      const setType = this.setType
      const setIndex = this.setIndex
      const provinceSave = this.provinceSave
      console.log(provinceSave, setIndex, 'provinceSave')
      if (provinceSave.length > 0) {
        const tableData = {
          signid: setType === 'add' ? `_DeliveryArea_${signid('signid')}` : this.tableData[setIndex]['signid'],
          type: 'data',
          cities: [],
          citiesSignid: [],
          num: 1,
          money: 0,
          numex: 1,
          moneyex: 0,
          coupon_num:0,
          coupon_price:0,
        }
        provinceSave.map(scopeItem => {
          const scopeData = Object.assign({}, scopeItem)
          const nodeLabel = scopeData.label
          const nodeLevel = scopeData.nodeLevel
          const idLevel = scopeData.id
          if (!([allCityCode, '810000000', '820000000'].includes(idLevel))) {
            if (nodeLevel === 'province') {
              const cities = []
              const citiesSignid = []
              const provinceChild = scopeData.children
              let isCityAll = true
              provinceChild.map(cityItem => {
                const cityChild = cityItem.children
                const getCity = this.cityName.filter(getcityItem => {
                  return getcityItem.id === cityItem.id
                })
                const allArea = getCity[0].children.length
                const cityLable = getCity[0].label
                if (allArea === cityChild.length && allArea !== 1) {
                  cities.push(cityLable)
                  citiesSignid.push(`${getCity[0].id}`)
                } else {
                  cityChild.map((areaItem, areaIndex) => {
                    const areaLable = areaItem.label
                    cities.push(areaLable)
                    tableData.citiesSignid.push(`${areaItem.id}`)
                  })
                }
              })

              const [getProvince] = this.allProvinceData.filter(getProvinceItem => {
                return getProvinceItem.id === idLevel
              })

              if (Array.isArray(getProvince.children) && (getProvince.children.length > 0)) {
                getProvince.children.map(cityItem => {
                  if (!citiesSignid.includes(cityItem.id)) {
                    isCityAll = false
                  }
                })

                if (isCityAll && (getProvince.children.length === provinceChild.length)) {
                  tableData.cities.push(nodeLabel)
                  tableData.citiesSignid.push(idLevel)
                } else {
                  tableData.cities.push(...cities)
                  tableData.citiesSignid.push(...citiesSignid)
                }
              }
            } else if (nodeLevel === 'city') {
              const cityChild = scopeData.children
              const getCity = this.cityName.filter(cityItem => {
                return cityItem.id === idLevel
              })
              const allArea = getCity[0].children.length
              const cityLable = getCity[0].label
              if (allArea === cityChild.length) {
                tableData.cities.push(cityLable)
                tableData.citiesSignid.push(`${getCity[0].id}`)
              } else {
                cityChild.map(areaItem => {
                  const areaLable = areaItem.label
                  tableData.cities.push(areaLable)
                  tableData.citiesSignid.push(`${areaItem.id}`)
                })
              }
            } else if (nodeLevel === 'area') {
              scopeData.map(areaItem => {
                const areaLable = areaItem.label
                tableData.cities.push(areaLable)
                tableData.citiesSignid.push(`${areaItem.id}`)
              })
            }
          } else {
            tableData.cities.push(scopeData.label)
            tableData.citiesSignid.push(`${idLevel}`)
          }
        })
        tableData.cities = tableData.cities.join(',')

        tableData.citiesSignid = tableData.citiesSignid

        if (setType === 'add') {
          const signid = tableData['signid']
          this.tableData.splice(this.tableData.length - 1, 0, tableData)
          store.set(signid, {
            savedata: JSON.stringify(tableData)
          })
        } else {
          const signid = this.tableData[setIndex]['signid']
          this.tableData.splice(setIndex, 1, tableData)
          store.set(signid, {
            savedata: JSON.stringify(tableData)
          })
        }
        this.uploadTrigger()
        this.output()
      } else {
        this.$message({
          message: '请选择配送范围！',
          type: 'error'
        })
      }
    },
    editTableData($index) {
      this.province = [].concat(JSON.parse(JSON.stringify(this.allProvinceData)))
      this.setType = 'edit'
      this.setIndex = $index
      this.uploadTrigger()
      console.log(this.province, 'this.province:editTableData')
      console.log(this.setIndex, 'this.setIndex')
    },
    setDefultTree() {
      if (this.setType === 'edit') {
        this.$nextTick(() => {
          const tableData = this.tableData[this.setIndex]
          const citiesSignid = tableData.citiesSignid
          console.log(citiesSignid, '$$citiesSignid')
          this.treeCheckChange('Right', citiesSignid, true)
          const getNode = this.$refs[`treeLeft`].getCheckedNodes()
          console.log(getNode)
          const filterNode = this.filterNode(getNode)
          this.rmvNode(filterNode, 'Left')
          this.addNode(filterNode)
          this.resiteNode()
          if (citiesSignid.length === 1 && citiesSignid.includes(allCityCode)) {
            this.province = []
          }
        })
      }
    },
    deleteTableData($index) {
      const signid = this.tableData[$index]['signid']
      console.log(signid)
      store.remove(signid)
      this.tableData.splice($index, 1)
      this.output()
    },
    addTableData() {
      this.province = [].concat(
        JSON.parse(JSON.stringify(this.allProvinceData))
      )
      console.log(this.province, 'addTableData')
      this.setType = 'add'
      this.uploadTrigger()
    },
    clearTreeData() {
      this.provinceSave = []
      this.province = []
      this.defaultSave = []
      this.defaultKeys = []
    },
    changeNode(changeType) {
      const _this = this
      const getNode = _this.$refs[`tree${changeType}`].getCheckedNodes()
      const filterNode = this.filterNode(getNode)
      console.log(getNode)
      console.log(filterNode)
      this.rmvNode(filterNode, changeType)
      this.addNode(filterNode, changeType)
    },
    filterNode(dataArr) {
      if (dataArr.length > 0) {
        const provinceIdSave = []
        const cityIdSave = []
        const rootData = []
        dataArr.map(scopeItem => {
          const scopeData = Object.assign({}, scopeItem)
          const nodeLevel = scopeData.nodeLevel
          const idLevel = scopeData.id
          const nodeParentId = scopeData.nodeParentId || -1
          if (nodeLevel === 'province') {
            const rootId = idLevel
            if (!provinceIdSave.includes(rootId)) {
              rootData.push(scopeData)
              provinceIdSave.push(rootId)
            }
          } else if (nodeLevel === 'city') {
            const rootId = nodeParentId
            if (!provinceIdSave.includes(rootId)) {
              rootData.push(scopeData)
              cityIdSave.push(idLevel)
            }
          } else if (nodeLevel === 'area') {
            const _cityNode = this.cityName.filter(item => {
              return item.id === scopeData.nodeParentId
            })
            const rootId = _cityNode[0].nodeParentId
            if (
              !provinceIdSave.includes(rootId) && !cityIdSave.includes(_cityNode[0].id)
            ) {
              rootData.push(scopeData)
            }
          }
        })
        return rootData
      }
      return []
    },
    rmvNode(filterNode, rmvType) {
      const scopeNodeList = filterNode
      const that = this
      if (scopeNodeList.length > 0) {
        scopeNodeList.map(item => {
          that.$refs[`tree${rmvType}`].remove(item)
        })
      }
    },
    getEditScope(filterNode) {
      const that = this
      const scopeNodeList = filterNode
      const rootNodeList = JSON.parse(JSON.stringify([].concat(that.allProvinceData)))
      // console.log(scopeNodeList);
      if (scopeNodeList.length > 0) {
        scopeNodeList.map((scopeItem, scopeIndex) => {
          const nodeId = scopeItem.id
          const cityScope = scopeItem.children
          const rootProvice = rootNodeList.filter(provItem => {
            const provinceId = provItem.id
            return provinceId === nodeId
          })
          if (cityScope.length > 0 && (cityScope.length !== rootProvice[0].children.length) || (rootProvice[0].children.length === 1)) {
            cityScope.map((cityItem, cityIndex) => {
              const cityid = cityItem.id
              const areaScope = cityItem.children
              const rootCity = rootProvice[0].children.filter(rootCityItem => {
                const rootcityId = rootCityItem.id
                return rootcityId === cityid
              })
              if (areaScope.length > 0 && (areaScope.length !== rootCity[0].children.length) || (rootCity[0].children.length === 1)) {
                areaScope.map((areaItem, areaIndex) => {
                  const areaid = areaItem.id
                  const rootArea = rootCity[0].children
                  rootArea.map((rootAreaItem, rootAreaIndex) => {
                    if (rootAreaItem.id === areaid) {
                      rootArea.splice(rootAreaIndex, 1)
                    }
                  })
                })
              } else {
                rootProvice[0].children.map((_rootCityItem, _rootCityIndex) => {
                  if (_rootCityItem.id === cityid) {
                    rootProvice[0].children.splice(_rootCityIndex, 1)
                  }
                })
              }
            })
          } else {
            console.log('删除省份', rootProvice[0].children.length)
            rootNodeList.map((_provItem, _provIndex) => {
              if (_provItem.id === nodeId) {
                rootNodeList.splice(_provIndex, 1)
              }
            })
          }
        })
      }
      return rootNodeList || []
    },
    addNode(filterNode, addType = 'Left') {
      console.log(filterNode)
      const that = this
      const scopeNodeList = filterNode
      const rootNodeList = addType === 'Left' ? that.provinceSave : that.province
      const rootNodeTree = addType === 'Left' ? that.$refs.treeRight : that.$refs.treeLeft
      if (scopeNodeList.length > 0) {
        scopeNodeList.map(scopeItem => {
          const nodeLevel = scopeItem.nodeLevel
          const nodeId = scopeItem.id
          const nodeParentId = scopeItem.nodeParentId || -1
          if (nodeLevel === 'province') {
            const hasProvice = rootNodeList.filter(provItem => {
              const provinceId = provItem.id
              return provinceId === nodeId
            })
            if (hasProvice.length > 0) {
              const cityChild = scopeItem.children
              const hasCityList = hasProvice[0].children.map(cityItem => {
                const cityId = cityItem.id
                return cityId
              })

              const hasCity = scopeItem.children.filter(cityItem => {
                const cityId = cityItem.id
                return hasCityList.includes(cityId)
              })

              if (hasCity.length > 0) {
                console.log(hasCity, '存在市级')
                hasCity[0].children.map(areaItem => {
                  rootNodeTree.append(areaItem, areaItem.nodeParentId)
                })
              } else {
                cityChild.map(cityItem => {
                  rootNodeTree.append(cityItem, cityItem.nodeParentId)
                })
              }
            } else {
              rootNodeList.push(scopeItem)
            }
          } else if (nodeLevel === 'city') {
            const onProvice = rootNodeList.filter(provItem => {
              const provinceId = provItem.id
              return provinceId === nodeParentId
            })
            if (onProvice.length > 0) {
              const onCity = onProvice[0].children.filter(cityItem => {
                const cityId = cityItem.id
                return cityId === nodeId
              })

              if (onCity.length > 0) {
                console.log(onCity, '存在市级')
                const areaChild = scopeItem.children
                areaChild.map(areaItem => {
                  rootNodeTree.append(areaItem, areaItem.nodeParentId)
                })
              } else {
                onProvice[0].children.push(scopeItem)
              }
            } else {
              let _getProviceCopy = {}
              const getProvice = that.allProvinceData.filter(provItem => {
                const provinceId = provItem.id
                return provinceId === nodeParentId
              })
              _getProviceCopy = Object.assign(_getProviceCopy, getProvice[0])
              _getProviceCopy.children = [scopeItem]
              rootNodeList.push(_getProviceCopy)
            }
          } else if (nodeLevel === 'area') {
            let _getCityCopy = {}
            const getCity = this.cityName.filter(cityItem => {
              return cityItem.id === nodeParentId
            })
            let _getProviceCopy = {}
            const getProvice = that.allProvinceData.filter(provItem => {
              const provinceId = provItem.id
              return provinceId === getCity[0].nodeParentId
            })
            const inProvice = rootNodeList.filter(provItem => {
              const provinceId = provItem.id
              return provinceId === getProvice[0].id
            })

            if (inProvice.length > 0) {
              const inCity = inProvice[0].children.filter(cityItem => {
                const cityItemId = cityItem.id
                return cityItemId === nodeParentId
              })
              if (inCity.length > 0) {
                inCity[0].children.push(scopeItem)
                rootNodeTree.append(scopeItem, nodeParentId)
              } else {
                _getCityCopy = Object.assign(_getCityCopy, getCity[0])
                _getCityCopy.children = [scopeItem]
                inProvice[0].children.push(_getCityCopy)
              }
            } else {
              _getCityCopy = Object.assign(_getCityCopy, getCity[0])
              _getCityCopy.children = [scopeItem]
              _getProviceCopy = Object.assign(_getProviceCopy, getProvice[0])
              _getProviceCopy.children = [_getCityCopy]
              rootNodeList.push(_getProviceCopy)
            }
          }
        })
      }
    },
    resiteNode() {
      this.$refs.treeRight.setCheckedKeys([])
      this.$refs.treeLeft.setCheckedKeys([])
    },
    treeCheckChange(treeType, $event, isReset) {
      this.$refs[`tree${treeType === 'Left' ? 'Right' : 'Left'}`].setCheckedKeys(
        isReset ? $event : []
      )
      if ($event.id === allCityCode) {
        const hasKey = this.defaultKeys.includes(allCityCode)
        if (!hasKey) {
          this.defaultSave = [...this.$refs[`treeLeft`].getCheckedKeys()]
          this.province = [{ children: [], id: allCityCode, label: '全国', nodeLevel: 'province', value: '全国' }]
          this.provinceSave = []
        } else {
          this.province = [].concat(
            JSON.parse(JSON.stringify(this.allProvinceData))
          )
          this.provinceSave = []
        }
        tooggleArray(this.defaultKeys, allCityCode)
      }
      console.log(treeType, $event, isReset, this.defaultSave, 'treeType, $event, isReset')
    },
    treeCheckChangeAll(data, node, dom) {

    },
    nodeLeftClick(data, node, dom) {
      console.log(data, node)
    },
    nodeRightClick(data, node, dom) {
      console.log(data, node)
    },
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    },
    uploadTrigger() {
      this.isShowModel = !this.isShowModel
    },
    output() {
      if (
        Object.prototype.toString.call(this.changeEvt) === '[object Function]'
      ) {
        const _tableData = [...this.tableData]
        _tableData.pop()
        this.changeEvt(_tableData)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.transfer {
    /deep/ .el-table__fixed {
        z-index: 0;
    }
    /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border: none!important;
      border-bottom: 1px solid #ebeef5 !important;
    }
    width: 100%;
}

.transfer--modelbox {
    text-align: center;

    .el-table .input-slot {}

    .transfer-custom {
        font-size: 14px;
        text-align: left;
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;

        .transfer-custom__buttons {}

        .transfer-custom-panel {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            display: inline-block;
            vertical-align: middle;
            width: 380px;
            max-height: 100%;
            box-sizing: border-box;
            position: relative;
            min-width: 380px;
            margin: 0;
            padding: 0;
            text-align: left;

            .transfer-custom-panel__header {
                height: 40px;
                line-height: 40px;
                background: #f5f7fa;
                margin: 0;
                margin-bottom: 15px;
                padding-left: 15px;
                border-bottom: 1px solid #ebeef5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                color: #000;

                span {
                    font-size: 16px;
                    color: #303133;
                    font-weight: 400;
                    padding-left: 8px;
                }
            }

            .transfer-custom-panel__group {
                height: 300px;
                padding-top: 0;
                margin: 0;
                padding: 6px 0;
                list-style: none;
                overflow: auto;
                box-sizing: border-box;

                & .transfer-custom-panel-item {
                    display: flex;
                    flex-direction: row;
                    padding-left: 10px;

                    .transfer-custom-label {
                        .el-checkbox__original {
                            width: 14px !important;
                            height: 14px !important;
                            left: 0 !important;
                        }
                    }

                    ul {
                        flex-grow: 1;
                        margin-left: 10px;

                        .transfer-custom-tree-item {
                            flex-grow: 1;
                        }
                    }
                }
            }
        }
    }

    .el-transfer-panel {
        min-width: 380px;

        .el-transfer-panel__item>.el-checkbox__input {
            top: 8px;
        }

        .el-tree-node__content {
            height: auto;
        }

        .transfer-tree {
            .el-checkbox {
                white-space: nowrap;
                cursor: pointer;
                outline: none;
                display: inline-block;
                line-height: 1;
                position: relative;
                vertical-align: middle;

                .el-checkbox__input {
                    position: relative;
                    top: 0;
                }
            }
        }
    }

    .transfer-footer {
        margin-left: 20px;
        padding: 6px 5px;
    }

    & .footer {
        position: relative;
        padding: 0 15px;
        background: #f4f5f9;

        & .footer-button {
            margin: 0 auto;
        }

        & .footer-button .el-button:nth-of-type(1) {
            margin-left: 0 !important;
        }

        .title-help {
            letter-spacing: 2px;
        }
    }

    .transfer-main {
        background: #ffffff;
        margin: 0 auto;
        border: 3px dashed #e6e6e6;

        .el-main {
            padding-top: 40px;
            padding-bottom: 40px;
            box-shadow: none;
        }
    }
}
</style>
